import * as React from "react";
import { Button } from "antd";
import "../styles/guide.less";

export default class NewGuide extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      top: 166,
      left: 175
    };
  }

  static defaultProps = {
    addNewPage: () => {},
    closeGuide: () => {}
  };

  render() {
    return (
      <div className="usage-guide-help steps-new-articles">
        <div className="content">
          {this._renderGuide()}
        </div>
      </div>
    );
  }

  componentDidMount() {
    //算出新建页面按钮的位置
    let clientRect = document
      .getElementById("page-manage-content")
      .getBoundingClientRect();
    let { top, left } = clientRect;
    this.setState({ top, left });
  }

  _renderGuide = () => {
    let { top, left } = this.state;
    return (
      <div className="item">
        <div className="item-menu" style={{ top: top - 10, left: left - 15 }}>
          <Button onClick={this.props.addNewPage} type="primary" size="large">
            新增页面
          </Button>
        </div>
        <div className="item-main" style={{ top: top - 45, left: left + 115 }}>
          <p>点击新增页面，开始选择页面模版</p>
          <div className="btns">
            <Button
              className="pushr"
              type="ghost"
              onClick={this.props.closeGuide}
            >
              知道了
            </Button>
          </div>
        </div>
      </div>
    );
  };
}
